<
<template>
    <div>
        <div class="flex_x fx_row select_bg" >
            <div class="search_input_box" ><input class="search_input" type="text" /></div>
            <div class="search flex_x fx_ac fx_pc">搜索</div>
        </div>
        <div >
             <el-tabs stretch v-model="booKind" @tab-click="handleClick">
                <el-tab-pane label="热书推荐" name="firstBook">
                    <div class="flex_x fx_row fx_sa" >
                        <div class="flex_x fx_row fx_warp bookShow">
                              <div class="flex_x fx_c fx_ac fx_pc bookShow_index" v-for="(item,index) in book" :key="index">
                                  <img :src="item.img" class="imgsec"/>
                                  <div>{{item.bookName}}</div>
                                  <div class="flex_x fx_row">                                    
                                        <el-button type="primary">借书</el-button>
                                        <el-button>简介</el-button>
                                  </div>
                              </div>
                        </div>
                        <!-- <div class="ad_box"></div> -->
                    </div>
                </el-tab-pane>
                <el-tab-pane label="教育类" name="secondBook">
                    <div class="flex_x fx_row fx_sa" >
                        <div class="flex_x fx_row fx_warp bookShow">
                              <div class="flex_x fx_c fx_ac fx_pc bookShow_index" 
                               v-for="(item,index) in educationBook" :key="index">
                                  <img :src="item.img" class="imgsec"/>
                                  <div>{{item.bookName}}</div>
                                  <div class="flex_x fx_row">                                    
                                        <el-button type="primary">借书</el-button>
                                        <el-button>简介</el-button>
                                  </div>
                              </div>
                        </div>
                        <!-- <div class="ad_box"></div> -->
                    </div>
                </el-tab-pane>
                <el-tab-pane label="名人类" name="thirdBook">
                    <div class="flex_x fx_row fx_sa" >
                        <div class="flex_x fx_row fx_warp bookShow">
                              <div class="flex_x fx_c fx_ac fx_pc bookShow_index" 
                               v-for="(item,index) in famousBook" :key="index">
                                  <img :src="item.img" class="imgsec"/>
                                  <div>{{item.bookName}}</div>
                                  <div class="flex_x fx_row">                                    
                                        <el-button type="primary">借书</el-button>
                                        <el-button>简介</el-button>
                                  </div>
                              </div>
                        </div>
                        <!-- <div class="ad_box"></div> -->
                    </div>
                </el-tab-pane>
                <el-tab-pane label="医学类" name="fourthBook">定时任务补偿</el-tab-pane>
                <!-- <el-tab-pane label="计算机" name="fiveBook">定时任务补偿</el-tab-pane>
                <el-tab-pane label="金融管理类" name="sixBook">定时任务补偿</el-tab-pane>
                <el-tab-pane label="化学类" name="severBook">定时任务补偿</el-tab-pane>
                <el-tab-pane label="语言类" name="eightBook">定时任务补偿</el-tab-pane>
                <el-tab-pane label="机械类" name="nineBook">定时任务补偿</el-tab-pane> -->
            </el-tabs>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            booKind:"firstBook",
            book:[{
                img:"https://img1.baidu.com/it/u=3081328696,2005750704&fm=26&fmt=auto",
                bookName:"本草纲目"
            },{
                img:"https://img1.baidu.com/it/u=3401915745,1131823604&fm=26&fmt=auto",
                bookName:"中华上下五千年"
            },{
                img:"https://img0.baidu.com/it/u=267993896,3416487364&fm=26&fmt=auto",
                bookName:"十万个为什么"
            },{
                img:"https://img1.baidu.com/it/u=4122522461,2063674550&fm=26&fmt=auto",
                bookName:"钢铁是怎样炼成的"
            },{
                img:"https://img1.baidu.com/it/u=209871893,794462172&fm=26&fmt=auto",
                bookName:"英语四级"
            },{
                img:"https://img2.baidu.com/it/u=75918316,1140781565&fm=26&fmt=auto",
                bookName:"英语六级"
            },{
                img:"https://img2.baidu.com/it/u=2677324600,450322352&fm=26&fmt=auto",
                bookName:"计算机二级"
            },{
                img:"https://img2.baidu.com/it/u=1651310368,3303867727&fm=26&fmt=auto",
                bookName:"计算机应用"
            },{
                img:"https://img1.baidu.com/it/u=417317463,1145304475&fm=15&fmt=auto",
                bookName:"JAVA程序基础"
            },{
                img:"https://img0.baidu.com/it/u=886339765,3556885320&fm=15&fmt=auto",
                bookName:"Python人工智能"
            },{
                img:"https://img1.baidu.com/it/u=209871893,794462172&fm=26&fmt=auto",
                bookName:"英语四级"
            },{
                img:"https://img1.baidu.com/it/u=209871893,794462172&fm=26&fmt=auto",
                bookName:"英语四级"
            },{
                img:"https://img1.baidu.com/it/u=209871893,794462172&fm=26&fmt=auto",
                bookName:"英语四级"
            },
            
            ],
            educationBook:[{
                img:"https://img1.baidu.com/it/u=4122522461,2063674550&fm=26&fmt=auto",
                bookName:"钢铁是怎样炼成的"
            },{
                img:"https://img1.baidu.com/it/u=209871893,794462172&fm=26&fmt=auto",
                bookName:"英语四级"
            },{
                img:"https://img2.baidu.com/it/u=75918316,1140781565&fm=26&fmt=auto",
                bookName:"英语六级"
            },{
                img:"https://img2.baidu.com/it/u=2677324600,450322352&fm=26&fmt=auto",
                bookName:"计算机二级"
            }],
            famousBook:[{
                img:"https://img1.baidu.com/it/u=3081328696,2005750704&fm=26&fmt=auto",
                bookName:"本草纲目"
            },{
                img:"https://img1.baidu.com/it/u=3401915745,1131823604&fm=26&fmt=auto",
                bookName:"中华上下五千年"
            },{
                img:"https://img0.baidu.com/it/u=267993896,3416487364&fm=26&fmt=auto",
                bookName:"十万个为什么"
            },{
                img:"https://img1.baidu.com/it/u=4122522461,2063674550&fm=26&fmt=auto",
                bookName:"钢铁是怎样炼成的"
            },{
                img:"https://img1.baidu.com/it/u=209871893,794462172&fm=26&fmt=auto",
                bookName:"英语四级"
            },{
                img:"https://img2.baidu.com/it/u=75918316,1140781565&fm=26&fmt=auto",
                bookName:"英语六级"
            },{
                img:"https://img2.baidu.com/it/u=2677324600,450322352&fm=26&fmt=auto",
                bookName:"计算机二级"
            },{
                img:"https://img2.baidu.com/it/u=1651310368,3303867727&fm=26&fmt=auto",
                bookName:"计算机应用"
            },{
                img:"https://img1.baidu.com/it/u=417317463,1145304475&fm=15&fmt=auto",
                bookName:"JAVA程序基础"
            },{
                img:"https://img0.baidu.com/it/u=886339765,3556885320&fm=15&fmt=auto",
                bookName:"Python人工智能"
            },{
                img:"https://img1.baidu.com/it/u=209871893,794462172&fm=26&fmt=auto",
                bookName:"英语四级"
            },{
                img:"https://img1.baidu.com/it/u=209871893,794462172&fm=26&fmt=auto",
                bookName:"英语四级"
            },{
                img:"https://img1.baidu.com/it/u=209871893,794462172&fm=26&fmt=auto",
                bookName:"英语四级"
            },
            
            ],
        }
    }
}
</script>
<style scoped>
.select_bg{
    padding:40px 0 40px 350px;
   
    background: lightblue;
}
.search {
    width: 80px;
    border: 1px solid black;
    border-radius: 0 30px 30px 0;
}
.search_input{
    width: 395px;
    height: 40px;
    margin-left: 20px;
    /* background: royalblue; */
    border: none;
}
.search_input_box{
    width: 420px;
    border: 1px solid black;
    border-radius: 30px 0 0 30px;
    background:white;
}
.bookShow{
    width: 100%;
    height: 550px;
    /* background-color: darkturquoise; */
    overflow:scroll;
}
.bookShow_index{
    width:180px;
    height:250px;
    /* background-color: blue; */
    margin-left:22px;
    margin-top:10px
}
.imgsec{
    width: 150px;
    height: 150px;

}
/* .ad_box{
    width: 19%;
    height: 500px;
    background-color: rgb(7, 248, 236);
} */
.flex_x{
    display: flex;
}
.fx_row{
    flex-direction: row;
}
.fx_c{
    flex-direction: column;
}
.fx_ac{
    align-items: center;
}
.fx_pc{
    justify-content: center;
}
.fx_sa{
    justify-content: space-around;
}
.fx_warp{
    flex-wrap: wrap;
}
</style>